<template>
	<div v-loading="loading" style="width:100%" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
		<el-row>
			<!--<iframe src="http://192.168.1.48:8080" width="100%" height=""></iframe>-->
			<el-col :span="6">
				<div @mouseenter="openSubject" @mouseleave="closeSubject">
					<div class="currentTitle">{{ currentGrade }}{{ currentSubject }}</div>
					<el-collapse-transition>
						<div class="subject" v-if="showAllsubject">
							<div v-for="item in subjectList">
								<p>{{ item.name }}</p>
								<div v-for="x in item.subject" @click="chooseSubject(item,x)">
									{{ x.name }}
								</div>
							</div>
						</div>
					</el-collapse-transition>
				</div>
				<div class="knowledge">
					<p>章节选择</p>
					<el-tree :data="treeData0" :props="defaultProps" accordion @node-click="chooseKnowledge" class="tree" :highlight-current="highlight"></el-tree>
					<p>知识点选择</p>
					<el-tree :data="treeData1" :props="defaultProps" accordion @node-click="chooseKnowledge" class="tree" :highlight-current="highlight"></el-tree>
				</div>
			</el-col>
			<el-col :span="18" class="rightContent">
				<div class="questionType clearfix top">
					<span class="title">题型:</span>
					<div class="content">
						<div @click="chooseQuestionType(0)" :class="{active:currentType_id==0}">全部</div>
						<div v-for="item in currentQuestionTypeList" @click="chooseQuestionType(item.id)" :class="{active:currentType_id==item.id}">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="questionLevel clearfix top">
					<span class="title">难易度:</span>
					<div class="content">
						<div @click="chooseQuestionLevel(0)" :class="{active:currentLevel_id==0}">全部</div>
						<div v-for="item in currentQuestionLevelList" @click="chooseQuestionLevel(item.id)" :class="{active:currentLevel_id==item.id}">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="content ">
					<div v-for="(item,index) in currentQuenstionList" class="clearfix">
						<span>{{ (page-1)*15+index+1 }}.</span>
						<div>
							<div v-html="item.body" @click="clickQuestion(item)"></div>
							<div v-if="currentQuestionId==item.id">
								<span>解析:{{ item.analysis==''?'略':'' }}</span>
								<div v-html="item.analysis"></div>
								<span>正确答案：</span>
								<div v-html="item.answer"></div>
							</div>
						</div>
						<div @click="addCollect(item,$event)" :class="{'coled':collectIdList.indexOf(item.id)>-1}">
							<span v-if="collectIdList.indexOf(item.id)>-1" class="coled">已添加</span>
							<span v-if="collectIdList.indexOf(item.id)==-1"><i class="iconfont icon-add"></i>收藏</span>
						</div>
					</div>
					<div v-if="currentQuenstionList.length==0" class="noQues">
						抱歉！暂无相关试题
					</div>
				</div>
				<el-pagination v-if="count>15" class="pagination" background layout="prev, pager, next" :page-size="15" :current-page="page" :total="count" @current-change="changePage"></el-pagination>
			</el-col>
			<div class="totast" v-show="showTotast">{{ totastMsg }}</div>
		</el-row>
	</div>
</template>

<script>
	import api from '../../api';
	import { getObjByprop, getSeriDate,subjectMatch } from '../../util/util'
	import { mapState, mapMutations } from 'vuex'
	const qs = require('qs')
	export default {
		data() {
			return {
				showTotast:false,
				totastMsg:'',
				loading: true,
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				courseid:'',
				highlight:true,
				checkedIds: [],
				subjectList: [],
				currentGrade: '',
				currentSubject: '',
				showAllsubject: false,
				currentSubjectId: 1,
				currentCategory_id: 4111,
				currentQuestionTypeList: [],
				currentType_id: 0,
				currentLevel_id: 0,
				currentQuestionLevelList: [],
				treeData0: [],
				treeData1: [],
				currentQuenstionList: [],
				currentQuestionId: 0,
				page: 1,
				count: 0,
				collectIdList: [],
				collectNums: 0,
				collectMax: 30

			}
		},
		computed: {
			...mapState(["userlogin"])
		},
		components: {},
		created() {
			var that = this;
			this.INIT_STATE();
			api.getListSubject().then(response => {
				that.subjectList = response.data.datalist;
				that.currentGrade = that.subjectList[0].name;
				that.currentSubject = that.subjectList[0].subject[0].name;
				that.courseid=subjectMatch(that.currentSubject)
				//初始化题型
				that.getQuestionType(1)
				//初始化知识点结构
				that.getKnowledges(1, 0)
				//获取题目列表
				that.getQuestionList();
				
			//获取收藏夹题目信息判断有的题目是否已收藏
			api.getTeacherFavoriteTestids({
				courseid: this.courseid,
				teacherid: this.userlogin.id,
				dayfrom: 0,
				dayto: 0
			}).then(response => {
				that.collectIdList = response.data.data.testids.split(',')
				
				that.collectNums = that.collectIdList.length + 1
			})
			})
			api.getListQuestionLevel().then(response => {
				that.currentQuestionLevelList = response.data.datalist
			})
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			openSubject() {
				this.showAllsubject = true;
			},
			closeSubject() {
				this.showAllsubject = false
			},
			chooseSubject(item, x) {
				this.loading = true;
				this.currentSubjectId = x.id;
				this.currentGrade = item.name;
				this.currentSubject = x.name;
				this.courseid=subjectMatch(this.currentSubject)
				this.getQuestionType(this.currentSubjectId);
				this.getKnowledges(this.currentSubjectId);
			},
			getQuestionType(subject_id) {
				var that = this;
				this.loading = true;
				api.getQuestionType(subject_id).then(response => {
					that.currentQuestionTypeList = response.data.datalist;					
					//单选题==3   判断题==39 不定项选择题==7
				})
			},
			getKnowledges(subject_id) {
				var that = this;
				this.loading = true;
				this.page = 1;

				api.getKnowledges({
					'subject_id': subject_id,
					'type': 1
				}).then(response => {
					var data = JSON.stringify(response.data.datalist).replace(/son/g, 'children').replace(/name/g, 'label');
					that.treeData1 = JSON.parse(data)
					api.getKnowledges({
						'subject_id': subject_id,
						'type': 0
					}).then(response => {
						var data = JSON.stringify(response.data.datalist).replace(/son/g, 'children').replace(/name/g, 'label');
						that.treeData0 = JSON.parse(data)
						//获取知识点的时候重置当前知识点的id
						that.currentCategory_id = that.treeData0[0].children[0].id
						//重新获取试题
						that.getQuestionList()
					})
				})
			},
			chooseQuestionType(s) {
				this.loading = true;
				this.page = 1;
				this.currentType_id = s;
				this.getQuestionList();
			},
			chooseQuestionLevel(s) {
				this.loading = true;
				this.page = 1;
				this.currentLevel_id = s;
				this.getQuestionList()
			},
			getQuestionList(params) {
				var that = this;
				api.getListQuestion({
					category_id: this.currentCategory_id,
					type_id: this.currentType_id,
					level_id: this.currentLevel_id,
					page: this.page
				}).then(response => {
					that.currentQuenstionList = response.data.datalist
					that.currentQuenstionList.forEach(function(v,i){
						v.body=v.body.replace(/width=650/g,'')
						v.answer=v.answer.replace(/width=650/g,'')
					})
					//强制重新绘制
					that.$forceUpdate()
					that.count = Number(response.data.count)
				})
			},
			chooseKnowledge(data) {
				this.loading = true;
				//深度大于等于2的时候才可以获取到试题信息
				if(Number(data.depth) >= 2) {
					//重置题目的难易度等级
					this.currentType_id=0
					this.currentLevel_id = 0;
					this.page = 1;
					this.currentCategory_id = data.id
					this.getQuestionList()
				} else {
					this.loading = false;
				}
			},
			changePage(page) {
				this.loading = true;
				this.page = page;
				this.getQuestionList()
			},
			clickQuestion(item) {
				if(this.currentQuestionId == item.id) {
					this.currentQuestionId = 0
				} else {
					this.currentQuestionId = item.id
				}
			},
			addCollect(item, event) {
				var that=this
				if(event.target.innerText !== '已添加') {
					if(this.collectNums <= this.collectMax) {
						this.collectNums++
							api.addToCollect(qs.stringify({
								teacherid: this.userlogin.id,
								courseid: this.courseid,
								testid: item.id,
								categoryid: this.currentCategory_id,
								type: this.currentType_id,
								levelid: this.currentLevel_id,
								grade: item.grade ? encodeURI(item.grade) : 0,
								versions: item.version ? encodeURI(item.version.trim().replace(/\"/g, '\\\"')) : 0,
								unit: item.unit ? encodeURI(item.unit.replace(/\"/g, '\\\"')) : 0,
								small: item.small ? encodeURI(item.small.replace(/\"/g, '\\\"')) : 0,
								content: item.body ? encodeURI(item.body.replace(/\"/g, '\\\"')) : 0,
								answer: item.answer ? encodeURI(item.answer) : 0,
								analysis: item.analysis ? encodeURI(item.analysis.replace(/\"/g, '\\\"')) : 0,
								subject: item.subject ? encodeURI(item.subject.replace(/\"/g, '\\\"')) : 0
							})).then(response => {
								if(response.data.count == 0) {
									event.target.innerText = '已添加';
									that.collectIdList.push(item.id)
								}
							})

					} else {
//						this.$message.error('您的收藏夹已满，请删除部分内容再次重试');
						this.showTip('您的收藏夹已满，请删除部分内容再次重试')
					}
				} else {
//					this.$message({
//						type: 'error',
//						message: '请勿重复添加'
//					});
					this.showTip('请勿重复添加')
				}
			},
			showTip(msg){				
					var that=this;
					this.totastMsg=msg;
					this.showTotast=true;
					setTimeout(function(){
						document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0)'
						setTimeout(function(){
							that.showTotast=false	
							document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0.5)'
						},800)
					},1000)
			}
		},
		watch: {
			currentQuenstionList: function() {
				this.$nextTick(function() {
					this.loading = false
				})
			}
		}
	}
</script>

<style scoped>
	iframe {
		width: 100%;
		height: 700px;
		frameborder: 0;
		border: none;
	}
	.iconfont{
		font-size: 16px;
	}
	.currentTitle {
		background-color: #14acf4;
		color: white;
		font-size: 18px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: default;
		transition: all 0.5s;
	}
	
	.subject {
		cursor: default;
		border-bottom: 1px dashed #999999;
		padding-bottom: 22px;
		margin-bottom: 16px;
	}
	
	.subject>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 10px;
	}
	
	.subject>div>p {
		width: 100%;
		margin: 7px auto;
		color: #14acf4;
		font-size: 18px;
	}
	
	.subject>div>div {
		width: 25%;
		font-size: 14px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	
	.subject>div>div:hover {
		color: #14acf4;
	}
	.knowledge>p{
		margin-top: 8px;
		font-size: 14px;
		font-weight: bold;
	}
	.tree{
		color:#999999;
	}
	.tree>.treeitem .el-tree-node__label{
		color: #14acf4;
	}
	.el-col.el-col-6{
		margin-top: 2px;
	}
	.questionType {}
	
	.top {
		margin: 10px auto;
	}
	
	.top>span {
		width: 60px;
		margin-top: 5px;
		float: left;
		text-align: right;
		font-size: 14px;
	}
	
	.top>.content {
		float: left;
		width: 90%;
		cursor: default;
		margin-left: 10px;
	}
	
	.top>.content>div {
		display: inline-block;
		padding: 5px 15px;
		font-size: 14px;
		color: #999999;
	}
	.top>.content>div:hover{
		color: #14ACF4;
		cursor: pointer;
	}
	.top>.content>div.active {
		background-color: #14acf4;
		color: white;
	}
	
	.rightContent {
		padding-left: 20px;
		cursor: default;
		position: relative;
	}
	.rightContent:before{
		content: '';
		display: block;
		position: absolute;
		left: -2px;
		height: calc(100% - 42px);
		width: 2px;
		top: 42px;
		background-color: #F2F2F2;
	}
	.rightContent>.content {}
	
	.rightContent>.content>div {
		margin-top: 16px;
		display: flex;
		justify-content: space-between;
		border-top: 1px dashed #f2f2f2;
		padding-top: 16px;
		font-size: 14px;
	}
	.rightContent>.content>div.noQues{
		
		text-indent: 18px;
	}
	.rightContent>.content>div>span {
		flex: 1;
		margin-top: 4px;
		text-align: center;
		font-size: 14px;
		text-indent: 0;
	}
	
	.rightContent>.content>div>div:nth-of-type(2) {
		width: 80px;
		margin-left: 5px;
		text-align: center;
		background-color: #14acf4;
		color: white;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		margin-top: 25px;
		text-indent: 0;
	}
	.rightContent>.content>div>div:nth-of-type(2)>span{
		position: relative;
		top: -1px;
		left: -3px;
	}
	.rightContent>.content>div>div:nth-of-type(2)>span.coled{		
		top: 0;
		left: 0;
	}
	.rightContent>.content>div>div:nth-of-type(2)>i{
		margin-right: 3px;
		font-size: 16px;
	}
	.rightContent>.content>div>div:nth-of-type(2):hover{
		background-color: rgba(20,172,244,0.8);
		cursor: pointer;
	}
	.rightContent>.content>div>div:nth-of-type(2).coled{
		background-color: #FFAA60;
	}
	.rightContent>.content>div>div:nth-of-type(2).coled:hover{
		background-color: rgba(255,170,96,0.8);
		cursor: pointer;
	}
	.rightContent>.content>div>div:nth-of-type(1) {
		flex: 10;
	}
	.rightContent>.content>div>div:nth-of-type(1)>div:nth-of-type(2)>span {
		color: #14ACF4;
	}
	
	.pagination {
		margin-top: 40px;
		padding-bottom: 40px;
		float: right;
	}
	.rightContent>.content>div>div>div:nth-of-type(2){
		margin-top: 16px;
	}
	.rightContent>.content>div>div:nth-of-type(2)>div:nth-of-type(2)>span:nth-of-type(1){
		color: #FFAA60;
	}
	.rightContent>.content>div>div>div:nth-of-type(2)>div{
		margin-top: 8px;
		margin-bottom: 8px;
	}
	.rightContent>.content>div>div>div{
		font-size: 14px!important;
		font-family: "宋体"!important;
	}
	.rightContent>.content>div>div>div>span{
		font-weight: bold!important;
		color: #14ACF4;
	}
	.rightContent>.content>div>div>div font{
		margin-top: 8px!important;
		margin-bottom: 8px!important;
		line-height: 30px!important;
	}
	.el-pagination.is-background .el-pager li.active{
		background-color: #14acf4!important;
	}
	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
		background-color: #14acf4!important;
	}
</style>